<template>
  <div>
    <Card>
      <TypographyTitle :level="5">{{ title }}</TypographyTitle>
      <List item-layout="vertical" :data-source="dataSource" :pagination="false">
        <template #renderItem="{ item }">
          <ListItem>
            <template #extra>
              <a @click="title == '任务列表' ? handelDetail(item) : handelSampleDetail(item)"><InfoCircleOutlined /></a>
            </template>
            <ListItemMeta>
              <template #title>
                <Tooltip placement="topLeft" :title="title == '任务列表' ? item.endpointName : item.endpointNames[0]">
                  <a @click="title == '任务列表' ? handleSampleList(item) : handleSampleTable(item)"
                    ><div
                      :style="{
                        maxWidth: '200px',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }"
                    >
                      <template v-if="title == '任务列表'">
                        {{ item.endpointName }}
                      </template>
                      <template v-else>
                        <TypographyText type="warning" v-if="item.isError">{{ item.endpointNames[0] }}</TypographyText>
                        <template v-if="!item.isError">{{ item.endpointNames[0] }}</template>
                      </template>
                    </div></a
                  ></Tooltip
                >
              </template>
            </ListItemMeta>
            <Tag color="#108ee9">{{ item.duration + ' ms' }}</Tag>
            <Divider type="vertical" />
            <TypographyText type="secondary">{{ item.startStr }}</TypographyText>
          </ListItem>
        </template>
      </List>
      <br />
      <Pagination size="small" v-model:current="current" :total="total" v-model:pageSize="pageSize" />
    </Card>
  </div>
</template>
<script lang="ts" setup>
import {
  List,
  ListItem,
  ListItemMeta,
  Divider,
  Tag,
  Card,
  TypographyText,
  TypographyTitle,
  Tooltip,
  Pagination,
} from 'ant-design-vue';
import { InfoCircleOutlined } from '@ant-design/icons-vue';
import { ref, toRef, watch } from 'vue';
import { getSampleList, getTaskList } from '/@/api/maintenance-center/skywalking/profiling/profiling';
const current = ref(1);
const total = ref();
const pageSize = ref(4);
const props = defineProps(['title']);
const dataSource = ref([]);
const title = ref();
title.value = toRef(props, 'title').value;
// 分页
const pageSlice = () => {
  dataSource.value = dataSource.value.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
};
const getTasks = async (params) => {
  dataSource.value = await getTaskList(params);
  total.value = dataSource.value.length;
  pageSlice();
};
const getSamples = async (params) => {
  dataSource.value = await getSampleList(params.taskId);
  total.value = dataSource.value.length;
  dataSource.value.map((item) => {
    item.serviceName = params.serviceName;
    return item;
  });
  pageSlice();
};
const setList = async (listParams) => {
  if (title.value == '任务列表') {
    getTasks(listParams);
  }
  if (title.value == '采样列表') {
    getSamples(listParams);
  }
  watch(current, () => {
    if (dataSource.value.length !== 0) {
      if (title.value == '任务列表') {
        getTasks(listParams);
      }
      if (title.value == '采样列表') {
        getSamples(listParams);
      }
    }
  });
};
const clearList = () => {
  dataSource.value = [];
  total.value = 0;
  current.value = 1;
};
const emit = defineEmits([
  'setSampleList',
  'setTaskDetail',
  'clearSample',
  'setSampleTable',
  'setSampleDetail',
  'clearAnalyze',
]);
const handelDetail = (item) => {
  emit('setTaskDetail', item);
};
const handleSampleList = (item) => {
  emit('clearSample');
  emit('setSampleList', { taskId: item.id, serviceName: item.serviceName });
};
const handelSampleDetail = (item) => {
  emit('setSampleDetail', item);
};
const handleSampleTable = (item) => {
  emit('clearAnalyze');
  emit('setSampleTable', item);
};
defineExpose({ setList, clearList });
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
